<template>
  <a-table
    :columns="columns"
    :dataSource="data"
    rowKey="id"
    :pagination="pagination"
    @change="handleTableChange"
  >
    <template slot="status" slot-scope="status">
      <a-tag :color="status | statusColorFilter">{{ status | statusTextFilter }}</a-tag>
    </template>
    <template slot="action" slot-scope="text, record">
      <a @click="handleView(record)">查看</a>
    </template>
  </a-table>
</template>

<script>
const columns = [
  {
    title: '申请时间',
    dataIndex: 'applyTime',
    sorter: true
  },
  {
    title: '申请人',
    dataIndex: 'teacher'
  },
  {
    title: '课程名称',
    dataIndex: 'courseName'
  },
  {
    title: '原时间/教室',
    dataIndex: 'originalInfo'
  },
  {
    title: '调整后时间/教室',
    dataIndex: 'adjustedInfo'
  },
  {
    title: '审批状态',
    dataIndex: 'status',
    scopedSlots: { customRender: 'status' }
  },
  {
    title: '审批人',
    dataIndex: 'approver'
  },
  {
    title: '操作',
    scopedSlots: { customRender: 'action' }
  }
]

export default {
  props: {
    data: {
      type: Array,
      default: () => []
    },
    pagination: {
      type: Object,
      default: () => ({
        current: 1,
        pageSize: 10,
        total: 0
      })
    }
  },
  filters: {
    statusColorFilter(status) {
      const map = {
        approved: 'green',
        rejected: 'red'
      }
      return map[status]
    },
    statusTextFilter(status) {
      const map = {
        approved: '已通过',
        rejected: '已拒绝'
      }
      return map[status]
    }
  },
  data() {
    return {
      columns
    }
  },
  methods: {
    handleTableChange(pagination, filters, sorter) {
      this.$emit('change', pagination, filters, sorter)
    },
    handleView(record) {
      this.$emit('view', record)
    }
  }
}
</script>